<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <style type="text/css">
        body {
            font-size: 70%;
            font-family: verdana, helvetica, arial, sans-serif;
        }
    </style>

    <script type="text/javascript">
        function cnvs_getCoordinates(e) {
            x = e.clientX;
            y = e.clientY;
            document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")";
        }

        function cnvs_clearCoordinates() {
            document.getElementById("xycoordinates").innerHTML = "";
        }
    </script>
</head>

<body style="margin:0px;">

<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>

<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3"
     onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br/>
<br/>
<br/>
<div id="xycoordinates"></div>


</body>
</html>
